.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
* {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.box {
    display: -webkit-flex;
    display: flex;
}
html,
body {
    width: 100%;
    height: 100%;
    background: #f8f3f7;
}
.padding(@top, @right, @bottom, @left) {
    .px2rem(padding-top,@top);
    .px2rem(padding-right,@right);
    .px2rem(padding-bottom,@bottom);
    .px2rem(padding-left,@left);
}
.margin(@top, @right, @bottom, @left) {
    .px2rem(margin-top,@top);
    .px2rem(margin-right,@right);
    .px2rem(margin-bottom,@bottom);
    .px2rem(margin-left,@left);
}
.pl(@pl) {
    .px2rem(padding-left,@pl);
}
.pr(@pr) {
    .px2rem(padding-right,@pr);
}
.pt(@pt) {
    .px2rem(padding-top,@pt);
}
.pb(@pb) {
    .px2rem(padding-bottom,@pb);
}
.ml(@ml) {
    .px2rem(margin-left,@ml);
}
.mr(@mr) {
    .px2rem(margin-right,@mr);
}
.mt(@mt) {
    .px2rem(margin-top,@mt);
}
.mb(@mb) {
    .px2rem(margin-bottom,@mb);
}
.w(@width) {
    .px2rem(width,@width);
}
.h(@height) {
    .px2rem(height,@height);
}
.lh(@lh) {
    .px2rem(line-height,@lh)
}
.fz(@fz) {
    .px2rem(font-size,@fz)
}
.swiper-container {
    height: 100%;
    background: #f8f3f7;
    .swiper-slide {
        background: #f8f3f7;
        height: 100%;
    }
    .swiper-slide:nth-child(1) {
        .header {
            width: 100%;
            .h(900);
            position: fixed;
            top: 0;
            .box();
            align-items: center;
            .left {
                width: 30%;
            }
            .center {
                flex: 1;
                p:nth-child(1) {
                    img {
                        .w(305);
                        .h(307);
                    }
                }
                p:nth-child(2) {
                    .fz(44);
                    color: black;
                    .pt(70);
                }
            }
        }
        .footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            img {
                width: 100%;
            }
        }
    }
    .swiper-slide:nth-child(2) {
        .header {
            width: 100%;
            .h(600);
            position: fixed;
            top: 0;
            .box();
            align-items: center;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .footer {
            width: 100%;
            .h(500);
            position: fixed;
            bottom: 0;
            .swiper-hua {
                li:nth-child(1) {
                    .fz(58);
                    color: #505454;
                    .pl(200);
                }
                li:nth-child(2) {
                    .pt(50);
                    .pl(35);
                    .fz(64);
                    color: #e0245e;
                    a {
                        .fz(52);
                        color: #7c7d7f;
                    }
                    span {
                        color: #7c7d7f;
                    }
                }
            }
        }
    }
    .swiper-slide:nth-child(3) {
        .header {
            width: 100%;
            .h(700);
            position: fixed;
            top: 0;
            .box();
            justify-content: center;
            align-items: center;
            ul {
                li:nth-child(1) {
                    width: 20%;
                }
                li:nth-child(2) {
                    flex: 1;
                    .a {
                        .box();
                        justify-content: center;
                        img {
                            .w(50);
                            .h(143);
                        }
                    }
                    .b {
                        p {
                            .fz(42);
                            color: #e54776;
                            .pl(30);
                            .pt(70);
                        }
                    }
                    .c {
                        img {
                            .w(264);
                            .h(260);
                            .pt(100);
                        }
                    }
                }
                li:nth-child(3) {
                    width: 30%;
                }
            }
        }
        .footer {
            width: 100%;
            .h(400);
            position: fixed;
            bottom: 0;
            .box();
            justify-content: flex-start;
            align-items: center;
            img {
                .w(460);
                .h(250);
                .pl(90);
            }
        }
    }
    .swiper-slide:nth-child(4) {
        .header {
            width: 100%;
            .h(700);
            position: fixed;
            top: 0;
            .box();
            justify-content: center;
            align-items: center;
            ul {
                li:nth-child(1) {
                    width: 20%;
                }
                li:nth-child(2) {
                    flex: 1;
                    .a {
                        .box();
                        justify-content: center;
                        img {
                            .w(50);
                            .h(143);
                        }
                    }
                    .b {
                        p {
                            .fz(42);
                            color: #e54776;
                            .pl(30);
                            .pt(70);
                        }
                    }
                }
                li:nth-child(3) {
                    width: 30%;
                }
            }
        }
        .footer {
            width: 100%;
            .h(400);
            position: fixed;
            bottom: 0;
            .box();
            justify-content: flex-start;
            align-items: center;
            .tiaoshou {
                .w(339);
                .h(112);
                background: linear-gradient(#e45f86, #e23c6e);
                border-radius: 7%;
                .fz(44);
                color: #ffffff;
                text-align: center;
                .lh(112);
                margin: 0 auto;
            }
        }
    }
}